Hostile Patterns in Error Messages錯誤提示

過早的錯誤提示、過於顯眼的欄位樣式，以及不必要地幹擾使用者的系統狀態訊息，會使簡單任務變得令人煩惱，並增加使用者的認知負擔。這種侵略性設計不僅無助於使用者體驗，還會加劇使用者的挫敗感。

Jakob Nielsen的兩條可用性準則與錯誤處理相關：

• 準則5：防止錯誤發生（避免易出錯的條件並提供確認選項）。

• 準則9：幫助使用者識別、診斷和從錯誤中恢復（使用簡單語言描述問題和解決方案）。

儘管防止和恢復錯誤的設計初衷是好的，但過於侵略性的模式往往適得其反，令人惱火和分心。

本文提供了避免這些問題的兩條核心指導：

1. 避免過早的錯誤提示。

2. 僅在必要時使用錯誤樣式。

一、避免過早的錯誤提示 Avoid Premature Error Messages

定義與問題：過早的錯誤提示是指在使用者尚未完成操作之前，系統就提示錯誤資訊。

1 表單欄位未完成時即提示錯誤

案例1：LG網站。ZIP碼輸入欄位在使用者剛開始輸入時就提示“格式錯誤”，直到字元數達到5位才消失。

案例2：Labcorp支付門戶。使用者在電子郵件欄位輸入首個字母時即提示“電子郵件地址無效”。

案例3：Sorel網站。出生日期欄位輸入尚未完成時即提示“請輸入有效日期”。

2 使用者尚未開始操作時即提示錯誤

案例1：Hilton酒店預訂頁面Conradnewyork.com：點選“姓氏”欄位即觸發紅色邊框和提示“請輸入姓氏”，即使使用者尚未輸入內容。

案例2：Xpress-pay支付門戶。在使用者尚未操作時即提示“金額不能為空”，並新增了多餘的視覺標識（如星號、紅色邊框等）。

延遲提示時間：僅在使用者完成欄位輸入並切換至下一個欄位後顯示錯誤資訊。

提供約束條件：在表單填寫前明確哪些欄位必填，以及輸入格式要求（如電子郵件、電話號碼）。

避免多餘的視覺標識：標註必填欄位時，僅使用星號或文字（如“必填”），其他標識應僅在使用者提交表單時未填寫時顯示。

二、僅在必要時使用錯誤樣式 Reserve Error Styling for Errors Only

定義與問題：過度使用錯誤樣式（如紅色字型、警告圖示、黃色背景）會使非關鍵資訊看起來像錯誤，增加使用者的混淆和不安。

常見案例：非關鍵系統狀態訊息使用警告樣式

案例1：HR應用程式。顯示“無附件可顯示”時，採用黃色背景和警告圖示，誤導使用者認為存在問題。

案例2：Thrift Books網站。結賬過程中，提示“確保地址正確，提交後無法更改”時，使用紅色字型和警告圖示，令人誤以為輸入有誤。

適當的錯誤樣式使用案例

Amazon Glow應用。通話失敗時，使用黃色圖示提示“通話失敗”，適當地吸引使用者注意。

Paypal移動應用。非錯誤通知（如地址相關提示）使用灰色背景和資訊圖示（圓圈內小寫字母“i”），避免誤導使用者。

區分錯誤與一般狀態訊息：僅在真正的錯誤或嚴重問題出現時使用侵入性的錯誤樣式。

減少使用者認知負擔：對於非關鍵提示，避免使用紅色或黃色的背景及警告符號，採用更溫和的顏色和資訊圖示代替。